<template>
  <div class="app-main">
    <div class="g-m-left">
      <div class="logo flex-c">管理平台</div>
      <!-- <div class="logo flex-c">吉祥团餐管理平台</div> -->
      <left-menu></left-menu>
    </div>
    <div class="g-m-right">
      <MyHeader class="m-head"></MyHeader>
      <MainContainer class="main-container"></MainContainer>
    </div>

    <!-- left-menu 与 right-content 的数据应该在这处理好再分发下去 -->
  </div>
</template>
<script setup>
import MyHeader from '@/views/layout/header.vue';
import LeftMenu from '@/views/layout/leftMenu.vue'
import MainContainer from '@/views/layout/mainContainer.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();
</script>

<style lang="scss" scoped>
$headHeight: 46px;
$menuWidth: 200px;
$main-bg-color: #f3f3f3;

.app-main {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;

  .g-m-left {
    width: $menuWidth;
    min-width: $menuWidth;
    height: 100%;
  }

  .logo {
    height: $headHeight;
    background-color: #0a1439;
    color: #fff;
    letter-spacing: 1px;
    font-size: 16px;
    cursor: default;
/* 
// 彩色字体
    font-weight: 600;
    background-clip: text;
    color: #0000;
    white-space: nowrap;
    background-image: linear-gradient(to right,#09c8ce,#eb2f96); */
  }

  .g-m-right {
    width: calc(100% - $menuWidth);
    overflow: auto;
  }

  .m-head {
    height: $headHeight;
    border-bottom: 1px solid $main-bg-color;
    background-image: url('~@/assets/img/bg-repeat.jpg');
    
    // background-image: url('~@/assets/img/bg.gif');
    // color: #fff;
  }

  .main-container {
    overflow: auto;
    padding: 18px;
    height: calc(100% - $headHeight);
    // background-color: $main-bg-color;
    // background-image: url('~@/assets/img/bg-repeat.jpg');
    // background-image: url('~@/assets/img/bg.gif');
  }


}</style>